<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>作业2</title>
	<style type="text/css">
		.movingDiv{
			width: 200px;
			height: 200px;
			background-color: salmon;
			animation: moveDiv 1.5s linear 0s alternate infinite;
			margin: 5px auto;
			position: fixed;
			top: 20%;
			right: 20%;
		}
		@-webkit-keyframes moveDiv{
			20%{transform: rotateZ(90deg);background-color: skyblue;}
			60%{border-radius: 50%;background-color: fuchsia;}
			100%{transform: scale(1.5);background-color: salmon;box-shadow: -100px 250px 100px lemonchiffon,50px 200px 70px  silver,-150px 100px 50px lightblue,150px 100px 80px greenyellow,150px -100px 100px firebrick,-50px -100px 100px plum}
		}
		code{
			border:2px dashed silver;
			background-color: lemonchiffon;
			margin: 5px;
			padding: 5px;
		}
		em{
			font-weight: bold;
			color: slategrey;
		}
	</style>
</head>
<body>
	<!--作业: 求出abcdgbcdabddaabbdgbb 这个字符串中 出现次数最高的字符, 并输出其出现的次数!
- CSS3新增伪类选择器有哪些?
- 用CSS编写, div旋转90度, 0.5秒后变圆, 0.5秒后放大?
- 列举2种强制类型转换和1种隐式类型装换?
- split()和join()的区别?-->
<h1>出现次数</h1>
输入字符串吧:<input type="text"  id="strInput" value="abcdgbcdabddaabbdgbb" style="width: 300px;"/>
<button onclick="subStr()">计算</button>
<p id="showCount"></p>
<script type="text/javascript">
function subStr(){
	var str = document.getElementById("strInput").value;
		var countJson = {};
		for (var i=0;i<str.length;i++) {
			if (!countJson[str.charAt(i)]) {
				//charAt() 方法可返回指定位置的字符
				 // 首先得到i位置的字符char  再判断 json[char]是否存在 如果不存在就赋值为1
				countJson[str.charAt(i)] = 1;
			} else{
				//如果存在 就在原来值的基础上加1
				countJson[str.charAt(i)]++;
			}
//			这里的json是以出现的字母为Key,对应出现的次数为value
		}

		var maxCount = 0;
		var maxLetter= "";
		for(var i in countJson){//遍历JSON对象
			console.log(countJson[i]);
			if(countJson[i]>maxCount){
				maxCount = countJson[i]; //将json中的最大值则为出现最多数字的出现次数
				maxLetter = i; //而
			}
		}
		var res = '出现次数最多的是:'+maxLetter+' ， 出现了'+maxCount+'次' ;
		console.log(res);
		document.getElementById("showCount").innerHTML=res;
}
	
</script>
<hr />
<h1>css3新出的伪类</h1>
<ul>
	<li>E:root	选择匹配E所在文档的根元素。</li>
	<li>E:nth-child(n)	选择所有在其父元素中第n个位置的匹配E的子元素。</li>
	<li>E:nth-last-child(n)	选择所有在其父元素中倒数第n个位置的匹配E的子元素</li>
	<li>E:last-child	选择位于其父元素中最后一个位置，且匹配E的子元素。</li>
	<li>E:last-of-type	选择位于其父元素中且匹配E的最后第一个同类型的子元素。</li>
	<li>E:only-child	选择其父元素只包含一个子元素，且该子元素匹配E。</li>
	<li>E:only-of-type	选择其父元素只包含一个同类型的子元素，且该子元素匹配E。</li>
	<li>E:empty	选择匹配E的元素，且该元素不包含子节点。</li>
	<li>E:enabled	选择匹配E的所有可用UI元素。</li>
	<li>E:disabled	选择匹配E的所有不可用UI元素。</li>
	<li>E:checked	选择匹配E的所有可用UI元素。</li>
</ul>
<hr />
<h1>迷之div变化 :-(</h1>
	<div class="movingDiv"></div>
	<hr />
	<h1>强转和隐式转换</h1>
	<h3>第一种</h3>
		<code>
			var a = “123”；
			a=Number(a);
			或者反过来
			var b = 123;
			b=String(b);
		</code>
		<h3>第二种</h3>
		<code>
			转换为Number的int类型：
			b = “4.56”;
			c = parseInt(b);
			转换为Number的浮点类型(float)
			d = parseFloat(b);	
		</code>
		<h3>隐式转换</h3>
	<code>
		隐式类型转换：
		var q = “123"
		var w = 123;
		console.log(w+q)
		将w隐式转换成了字符串类型；

		var e = “23”;
		e++;
		e隐式转换成了number类型
	</code>
	<hr />
	<h1><em>split()</em>和<em>join()</em></h1>
	<p><em>split()</em> 方法用于把一个字符串分割成字符串数组,例子如下</p>
	<code>
		var arr=["不想写作业","不想敲代码","好想睡觉"];
		var newString = arr.join("/");
		这里newString的结果为字符串"不想写作业/不想写代码/好想睡觉";
	</code>
	<p><em>split()</em> 方法用于把一个字符串分割成字符串数组,例子如下</p>
	<code>
		var testStr = "火锅+烧烤+麻辣香锅";
		var foodArr = testStr.split("+");
		这里以"+"为分割依据，foodArr为一个数组，值为["火锅","烧烤","麻辣香锅"];
		<!--完了，把自己写饿了-->
	</code>
</body>
</html>